<template>
  <a-card title="影像学检查" :bordered="false" class="card-area">
    <a-spin :spinning="loading">
      <a-form-model
        :model="model"
        :label-col="formItemLayout.labelCol"
        :wrapper-col="formItemLayout.wrapperCol"
        labelAlign="left"
      >
        <a-form-model-item label="下肢血管CTA">
          <a-radio-group v-model="model.extremityVesselCta">
            <a-radio :value="1"> 正常 </a-radio>
            <a-radio :value="2"> 提示下肢血管病变 </a-radio>
            <a-radio :value="3"> 其它 </a-radio>
          </a-radio-group>
          <template v-if="model.extremityVesselCta == 3">
            <a-input
              placeholder="请输入CTA其它数据"
              v-model="model.extremityVesselCtaOther"
              :style="{ width: '300px' }"
            />
          </template>
        </a-form-model-item>

        <a-form-model-item label="下肢血管DSA">
          <a-radio-group v-model="model.extremityVesselDsa">
            <a-radio :value="1"> 正常 </a-radio>
            <a-radio :value="2"> 提示下肢血管病变 </a-radio>
            <a-radio :value="3"> 其它 </a-radio>
          </a-radio-group>
          <template v-if="model.extremityVesselDsa == 3">
            <a-input
              placeholder="请输入DSA其它数据"
              v-model="model.extremityVesselDsaOther"
              :style="{ width: '300px' }"
            />
          </template>
        </a-form-model-item>

        <a-form-model-item label="下肢血管MRI">
          <a-radio-group v-model="model.extremityVesselMri">
            <a-radio :value="1"> 正常 </a-radio>
            <a-radio :value="2"> 提示下肢血管病变 </a-radio>
            <a-radio :value="3"> 其它 </a-radio>
          </a-radio-group>
          <template v-if="model.extremityVesselMri == 3">
            <a-input
              placeholder="请输入MRI其它数据"
              v-model="model.extremityVesselMriOther"
              :style="{ width: '300px' }"
            />
          </template>
        </a-form-model-item>

        <a-form-model-item label="下肢血管B超">
          <a-radio-group v-model="model.extremityVesselBi">
            <a-radio :value="1"> 正常 </a-radio>
            <a-radio :value="2"> 提示下肢血管病变 </a-radio>
            <a-radio :value="3"> 其它 </a-radio>
          </a-radio-group>
          <template v-if="model.extremityVesselBi == 3">
            <a-input
              placeholder="请输入B超其它数据"
              v-model="model.extremityVesselBiOther"
              :style="{ width: '300px' }"
            />
          </template>
        </a-form-model-item>

        <a-form-model-item label="足X线">
          <a-form :style="{ display: 'inline-block' }">
            <a-form-item>
              <j-multi-select-tag v-model="model.footXray" dictCode="footX-ray" type="checkbox"> </j-multi-select-tag>
            </a-form-item>
          </a-form>
          <template v-if="model.footXray != null && model.footXray.indexOf('4') > -1">
            <a-input placeholder="请输入足X线其它数据" v-model="model.footXrayOther" :style="{ width: '300px' }" />
          </template>
        </a-form-model-item>

        <a-form-model-item label="其它">
          <a-textarea
            placeholder="请输入影像学检查其它数据"
            :auto-size="{ minRows: 2, maxRows: 5 }"
            v-model="model.other"
            :style="{ width: '300px' }"
          />
          <div
            v-if="model.other != null && model.other.length > 0"
            :style="{ display: 'inline-block', marginLeft: '1rem' }"
          >
            {{ model.other.length }}/200
          </div>
        </a-form-model-item>

        <!-- <a-divider orientation="left" :style="{ marginTop: '40px' }">上传影像学检查报告单</a-divider>

        <a-form-model-item label="报告名称">
          <a-input v-model="model.reportName" :max-length="20" :style="{ width: '300px' }" />
        </a-form-model-item>

        <a-form-model-item label="报告结论">
          <a-textarea
            :maxLength="500"
            v-model="model.reportConclusion"
            placeholder=""
            :auto-size="{ minRows: 7, maxRows: 10 }"
            :style="{ width: '300px' }"
          />
          <div
            v-if="model.reportConclusion != null && model.reportConclusion.length > 0"
            :style="{ display: 'inline-block', marginLeft: '1rem' }"
          >
            {{ model.reportConclusion.length }}/500
          </div>
        </a-form-model-item>

        <a-form-model-item v-bind="tailFormItemLayout">
          <j-image-upload
            text="上传影像"
            v-model="model.iconographyPhotosUrl"
            :is-multiple="true"
            :style="{ marginTop: '1.5rem' }"
          ></j-image-upload>
        </a-form-model-item> -->

        <a-form-model-item :wrapper-col="{ span: 12, offset: 10 }">
          <a-button type="primary" @click="onSave" :loading="saveLoading">保存</a-button>
          <a-popconfirm placement="topLeft" ok-text="是" cancel-text="否" @confirm="doConfirm">
            <template slot="title">
              <p>{{ text }}</p>
            </template>
            <a-button type="primary" style="margin-left: 30px" :loading="confirmLoading">确认完成</a-button>
          </a-popconfirm>
          <a-button type="primary" style="margin-left: 30px" @click="endServiceOk" :loading="saveLoading"
            >服务后数据录入完成</a-button
          >
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-card>
</template>

<script>
import { PAGE_MENU_TYPE } from '@/store/mutation-types'
import { getAction, postAction } from '@/api/manage'
import bus from '@/utils/bus'

export default {
  name: 'Iconography',
  inject: ['closeCurrent'],
  data() {
    return {
      loading: true,
      saveLoading: false,
      confirmLoading: false,
      model: {},
      text: '此操作代表你已完成了页面的填写，是否继续？',
      formItemLayout: {
        labelCol: {
          xs: { span: 12 },
          sm: { span: 2 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        }
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0
          },
          sm: {
            span: 12,
            offset: 2
          }
        }
      }
    }
  },
  created() {
    this.getInfo()
  },
  methods: {
    getInfo() {
      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]
      getAction('102/12/1021202', {
        patientId: patientId
      })
        .then(res => {
          if (res.success) {
            this.model = res.result
          } else {
            postAction('102/12/1021201', {
              patientId: patientId
            }).then(newRes => {
              if (newRes.success) {
                this.getInfo()
              } else {
                this.$message.error('患者档案创建失败')
              }
            })
          }
        })
        .finally(_ => {
          this.loading = false
        })
    },
    onSave() {
      this.loading = true
      this.saveLoading = true
      let queryData = JSON.parse(JSON.stringify(this.model))
      postAction('102/12/1021201', queryData)
        .then(res => {
          if (res.success) {
            this.$message.success('操作成功')
          } else {
            this.$message.error('操作失败')
          }
        })
        .finally(_ => {
          this.saveLoading = false
          this.loading = false
        })
    },
    doConfirm() {
      this.confirmLoading = true

      let patientId = this.$route.query[PAGE_MENU_TYPE.PatientId]

      let params = {
        patientId: patientId,
        type: 1,
        isFinished: 1
      }
      postAction('102/10/1021203', params)
        .then(res => {
          if (res.success) {
            this.$message.success('页面已确认', 5)
          }
        })
        .finally(_ => {
          this.confirmLoading = false
        })
    },
    endServiceOk() {
      this.onSave()
      bus.$emit('modifiedDataForFinalReportByIco', {
        type: '影像学检查',
        data: this.model
      })
      // this.$router.back(-1)
    }
  }
}
</script>

<style lang="less" scoped>
.ant-form-item {
  margin: 0.5rem;
}
</style>

